<template>
  <div class="bigBox">
    <el-row>
      <el-col :span="12" class="menu-left pd">
        <div class="filter-container">
          <el-input v-model="menuName" class="filter-item search-item" />
          <el-button class="filter-item" type="primary" @click="search">
            搜索
          </el-button>
          <el-button class="filter-item mr" type="success" @click="reset">
            重置
          </el-button>
          <el-dropdown trigger="click" class="filter-item">
            <el-button>
              更多操作<i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="add">添加</el-dropdown-item>
              <el-dropdown-item v-has-permission="['ment:delet']" @click.native="deleteMenu">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <el-tree
          ref="tree"
          :data="data"
          :props="defaultProps"
          show-checkbox
          default-expand-all
          check-strictly
          :filter-node-method="filterNode"
          @node-click="handleNodeClick"
          @check-change="handleCheckChange"
        />
      </el-col>
      <el-col :span="12" class="pl">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ title }}</span>
          </div>
          <el-form ref="form" :model="pageForm" :rules="rules" label-position="right" label-width="150px">
            <el-form-item label="上级菜单：">
              <el-cascader
                v-model="pageForm.parentId"
                :options="data"
                :show-all-levels="false"
                :props="{ expandTrigger: 'hover', checkStrictly: true, emitPath: false, value: 'id', label: 'name' }"
              />
            </el-form-item>
            <el-form-item label="名称：" prop="name">
              <el-input v-model="pageForm.name" />
            </el-form-item>
            <el-form-item label="类型：">
              <el-radio v-model="pageForm.type" label="0">菜单</el-radio>
              <el-radio v-model="pageForm.type" label="1">按钮</el-radio>
            </el-form-item>
            <div v-if="pageForm.type === '0'">
              <el-form-item label="图标：" prop="ico">
                <el-input v-model="pageForm.ico" />
              </el-form-item>
              <el-form-item label="URL：" prop="path">
                <el-input v-model="pageForm.path" />
              </el-form-item>
              <el-form-item label="组件：" prop="component">
                <el-input v-model="pageForm.component" />
              </el-form-item>
            </div>
            <el-form-item label="权限：">
              <el-input v-model="pageForm.perms" />
            </el-form-item>
          </el-form>
          <el-row>
            <el-col :offset="18" :span="4" style="text-align: center">
              <el-button type="success" plain @click="submitClick">{{ title }}</el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      // 节点选择数组
      select: [],
      pageForm: this.initData(),
      menuName: '',
      title: '新增',
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      data: [],
      rules: {
        name: { required: true, message: '名称不能为空', trigger: 'blur' }
      }
    }
  },
  mounted() {
    this.feach()
  },
  methods: {
    initData() {
      return {
        name: '',
        type: '0'
      }
    },
    search() {
      this.$refs.tree.filter(this.menuName)
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    reset() {
      this.title = '新增'
      this.menuName = ''
      this.$refs.tree.filter()
      // 先清除校验，再清除表单，不然有奇怪的bug
      this.$refs.form.clearValidate()
      this.$refs.form.resetFields()
      this.pageForm = this.initData()
    },
    feach(params = {}) {
      this.$get('/user/route/list', params).then(res => {
        if (res.data.status === 1) {
          this.data = res.data.data
        }
      })
    },
    handleNodeClick(data) {
      this.title = '修改'
      console.log(data)
      this.pageForm = {
        ...data
      }
    },
    handleCheckChange(data, event) {
      if (event) {
        this.select.push(data.id)
      } else {
        this.select = this.select.filter(t => t !== data.id)
      }
    },
    add() {
      this.reset()
    },
    deleteMenu() {
      const newArr = this.select.join(',')
      this.$delete(`/user/route/delete`, { ids: newArr }).then(res => {
        if (res.status === 200) {
          this.$message.warning(res.data.message)
          this.feach()
        } else {
          this.$message.warning(res.data.message)
        }
      })
    },
    submitClick() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.title === '新增') {
            this.$post('/user/route/add', this.pageForm).then(res => {
              if (res.data.status === 1) {
                this.$message.success(res.data.message)
                this.feach()
                this.reset()
              } else {
                this.$message.warning(res.data.message)
              }
            })
          } else {
            this.$put('/user/route/update', this.pageForm).then(res => {
              if (res.data.status === 1) {
                this.$message.success(res.data.message)
                this.feach()
              } else {
                this.$message.warning(res.data.message)
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }
  .menu-left {
    min-height: 500px;
    background-color: white;
  }
</style>
